<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8" />
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>侧边栏管理</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      text-align: center;
      overflow: hidden;
      height: 90%;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    a {
      text-decoration: none;
      color: #03a9f4;
      display: block;
      margin: 30px 0;
      transition: .1s;
    }

    a:hover {
      color: #3788d8;
    }

    #link:hover {
      font-size: 20px;
    }

    #orgin {
      font-size: 50px;
    }

    .loader,
    .loader:after {
      border-radius: 50%;
      width: 10em;
      height: 10em;
    }

    .loader {
      margin: 60px auto;
      font-size: 10px;
      position: relative;
      text-indent: -9999em;
      border-top: 1.1em solid rgba(3, 169, 244, 0.2);
      border-right: 1.1em solid rgba(3, 169, 244, 0.2);
      border-bottom: 1.1em solid rgba(3, 169, 244, 0.2);
      border-left: 1.1em solid #03a9f4;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation: load8 1.1s infinite linear;
      animation: load8 1.1s infinite linear;
    }

    @-webkit-keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div>
    <div class="loader">Loading...</div>
    <a id="link" target="_blank">https://github.com/shaonianzhentan</a>
    <a id="orgin" target="_blank">github.com</a>
  </div>
  <script>
    const setLink = (id, text, link) => {
      const a = document.getElementById(id)
      a.innerText = text
      a.setAttribute('href', link)
    }

    var ha = {
      init() {
        if (!location.search) return;
        let query = new URLSearchParams(location.search)
        let url = decodeURIComponent(query.get('url'))
        // 显示链接在界面
        setLink('link', url, url)

        if (url.startsWith('http')) {
          const uri = new URL(url)
          setLink('orgin', uri.host, uri.origin)
        }

        let mode = query.get('mode')
        // 如果HTTPS协议，则打开新页面
        if (location.protocol === 'https:' && url.indexOf('http://') == 0) {
          return window.open(url)
        }
        // 打开新页面
        if (mode == 2) {
          return window.open(url)
        }
        location.href = url
      }
    }
    ha.init()
  </script>
</body>

</html>